<template>
    <div class="silde_box">
        <slide-verify class="silde_box" ref="block" :slider-text="sliderText" :accuracy="accuracy" @again="onAgain"
            @success="onSuccess" @fail="onFail" @refresh="onRefresh" @click="returnResult"></slide-verify>
        <!-- <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button> -->
    </div>
</template>
   
<script lang="ts" setup>
import { onMounted, ref } from "vue";
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
import { defineEmits } from 'vue'
defineProps({
    sliderText:{
        type: String,
        default: '向右滑动'
    }
})
const accuracy = ref()
const result = ref<Boolean>(false);
const block = ref();

const onAgain = () => {
    // msg.value = "检测到非人为操作的哦！ try again";
    // 刷新
    block.value?.refresh();
};
// 定义返回结果
const emit = defineEmits(['silde_result']);
const returnResult = ()=>{
    emit('silde_result',result.value)
}


const onSuccess = (_times: number) => {
    // msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
    result.value = true
};

const onFail = () => {
    // msg.value = "验证不通过";
    result.value=false
};

const onRefresh = () => {
    // msg.value = "点击了刷新小图标";
    result.value=false
};

const handleClick = () => {
    // 刷新
    block.value?.refresh();
    // msg.value = "";
};

onMounted(()=>{
    handleClick();
})

</script>
<style scoped>
.silde_box {
    margin: 0 auto;
}
</style>